{extend name="public:base" title="$list_base.title" /}
{block name="cont"}
<form class="layout layui-form" action="{:url('advertising',['id' => $postdb.id])}" lay-filter="articlelist" method="post">
    <div class="cx-xs16">
        <div class="layui-tab layui-tab-brief" lay-filter="code">
            <ul class="layui-tab-title cx-fex-c">
                <li class="layui-this">系统模板</li>
                <li>自订义模板</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="cx-form-group _listlate cx-mag-b10 ">
                        <label class="cx-label">展示模板</label>
                        <div class="cx-form-item cx-fex-column">
                            <select class="latename" name="latename" lay-filter="onetemplate">
                                <option value="0">默认模板</option>
                                {volist name="filelist" id="cx" empty=""}
                                <option value="{$cx}" {eq name="postdb.latename|default=''" value="$cx"}selected{/eq}>{$cx}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <div class="cx-form-group cx-mag-b10 ">
                        <label class="cx-label">模板预览</label>
                        <div class="cx-form-item cx-fex-column">
                            <div class="cx-fex-c cx-fex-itemsc cx-bor cx-mag-t10" style="width: 30%;">
                                <img class="onetemplateimg cx-img-responsive" {eq name="postdb.temptype|default='0'" value="1"}src="/public/label/articlelist/one/{$postdb.latename|default=''}.jpg"{else /}src="/public/label/articlelist/list/{$postdb.latename|default=''}.jpg"{/eq} onerror="this.src='__PUBLIC__/img/imgnone.jpg'">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="cx-form-group cx-mag-b10 ">
                        <label class="cx-label">模板代码</label>
                        <div class="cx-form-item cx-fex-column">
                            <textarea class="cx-ipt cx-text-f16 cx-mag-t10 onetemplateval" rows="10" name="template" style="line-height: 2;">{$postdb.template|default=''|raw}</textarea>
                            <div class="layout cx-text-black-3">不懂代码请勿修改，代码说明：<a href="//www.wormcms.com" target="_blank">说明文档</a></div>
                        </div>
                    </div>
                    <div class="cx-form-group cx-mag-b10 ">
                        <label class="cx-label">可用参数</label>
                        <div class="cx-form-item cx-fex-column">
                            <div class="layout cx-text-black-6 cx-text-lh">变量名为 $res，如调用广告标题名称：{literal} {$res.title|default=''} {/literal}</div>
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>字段名</th>
                                    <th>说明</th>
                                </tr>
                                </thead>
                                <tbody class="_fileview">
                                <tr>
                                    <td>title</td>
                                    <td>广告标题</td>
                                </tr>
                                <tr class="tabimg">
                                    <td>uri</td>
                                    <td>图片地址</td>
                                </tr>
                                <tr>
                                    <td>like</td>
                                    <td>链接地址</td>
                                </tr>
                                <tr class="tabtxt">
                                    <td>text</td>
                                    <td>广告文本内容</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cx-xs8">
        <div class="cx-form-group _listlate cx-mag-b10 ">
            <label class="cx-label" for="title">标签名称</label>
            <div class="cx-form-item">
                <input id="title" class="cx-ipt" type="text" placeholder="请输入标签名称" name="title" value="{$postdb.title|default=$postdb.TagName}">
            </div>
        </div>
        <div class="cx-form-group _listlate cx-mag-b10 ">
            <label class="cx-label">选择广告类型</label>
            <div class="cx-form-item cx-pad-t5">
                <select name="TagMid" lay-filter="onemodel">
                    <option value="">选择广告类型</option>
                    <option value="1" {eq name="postdb.TagMid" value="1"}selected{/eq}>图片广告</option>
                    <option value="2" {eq name="postdb.TagMid" value="2"}selected{/eq}>幻灯片广告</option>
                    <option value="3" {eq name="postdb.TagMid" value="3"}selected{/eq}>图文广告</option>
                    <option value="4" {eq name="postdb.TagMid" value="4"}selected{/eq}>文字广告</option>
                </select>
                <div class="layout cx-text-black-3">如不选择则按默认显示</div>
            </div>
        </div>
        <div class="cx-form-group _listlate cx-mag-b10 ">
            <label class="cx-label">选择广告</label>
            <div class="cx-form-item cx-pad-t5">
                <select class="_fidlist" name="TagFid" lay-filter="fidlist">
                    <option value="">请选择广告</option>
                    {volist name="partlist" id="cx" empty=""}
                    <option value="{$cx.id}" {eq name="postdb.TagFid" value="1"}selected{/eq}>{$cx.title}</option>
                    {/volist}
                </select>
                <div class="layout cx-text-black-3">如不选择则按默认显示</div>
            </div>
        </div>
        <div class="cx-form-group cx-mag-b10 ">
            <label class="cx-label">广告预览</label>
            <div class="cx-form-item cx-fex-column cx-pad-t5">
                <div class="layout cx-bor cx-bor-black-1 _partlist" style="overflow-y: auto;">
                    <ul class="layout cx-fex-l cx-fex-column cx-pad-lr15 _adlist">
                        {notempty name='postdb.ad'}
                        {eq name='postdb.ad.class' value='2'}
                        {volist name="postdb.ad.cont" id="cx" empty=""}
                        <li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">标题:</div><div class="cx-text-black-6" style="max-width: 90%;">{$cx.title|default='-'}</div>
                        </li>
                        <li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">链接:</div><div class="cx-text-black-6" style="max-width: 90%;">{$cx.like|default='-'}</div></li>
                        <li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">图片:</div><div style="max-width: 90%;"><img src="{$cx.uri|default=''}" onerror="this.src='__PUBLIC__/img/imgnone.jpg'" class="cx-img-responsive"></div></li>
                        {/volist}
                        {else /}
                        <li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">标题:</div><div class="cx-text-black-6" style="max-width: 90%;">{$postdb.ad.cont.title|default='-'}</div>
                        </li>
                        <li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">链接:</div><div class="cx-text-black-6" style="max-width: 90%;">{$postdb.ad.cont.like|default='-'}</div></li>
                        {in name='postdb.ad.class' value='1,3'}
                        <li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">图片:</div><div style="max-width: 90%;"><img src="{$postdb.ad.cont.uri|default=''}" onerror="this.src='__PUBLIC__/img/imgnone.jpg'" class="cx-img-responsive"></div></li>
                        {/in}
                        {in name='postdb.ad.class' value='4,3'}
                        <li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">内容:</div><div style="max-width: 90%;">{$postdb.ad.cont.text|default='-'}</div></li>
                        {/in}
                        {/eq}
                        {/notempty}
                    </ul>
                </div>
                <div class="layout cx-text-black-3">如不选择则显示全部</div>
            </div>
        </div>
        <div class="cx-form-group _listlate cx-mag-b10 ">
            <label class="cx-label">启用</label>
            <div class="cx-form-item">
                <input type="radio" name="status" value="1" title="启用 " {eq name="postdb.status|default='1'" value="1"}checked{/eq} lay-filter="status">
                <input type="radio" name="status" value="0" title="禁用 " {eq name="postdb.status|default='1'" value="0"}checked{/eq} lay-filter="status">
            </div>
        </div>
    </div>
    <div class="layout cx-pos-f _listlate cx-bg-white cx-fex-r" style="bottom: 0;left: 0;right: 0;box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);">
        <input type="hidden" name="id" value="{$postdb.id}" required>
        <button class="cx-xs3 cx-button cx-bg-yellow" lay-submit lay-filter="upbutton">保 存</button>
    </div>
</form>
{/block}
{block name="foot_js"}
<script>
    window.onload = function(){
        let h = $(window).height(),
            dv = 60;
        $.each($(`._listlate`),function (index,item) {
            dv = dv + $(item).height() + 10;
        });
        $(`._partlist`).height(h - dv);
    }
    layui.use('form', function(){
        let layform = layui.form,
            contlist = {},
            filelist = {},
            getfile = function (id){
                if(filelist[id]){
                    $(`.latename`).html(`<option value="">默认模板</option>`);
                    $.each(filelist[id],function (index,item){
                        $(`.latename`).append(`<option value="${item}">${item}</option>`);
                    });
                    layform.render('select');
                    return;
                }
                let _dir = 'label/advertising/pic';
                _dir = id == '2' ? 'label/advertising/piclist' : _dir;
                _dir = id == '3' ? 'label/advertising/pictext' : _dir;
                _dir = id == '4' ? 'label/advertising/text' : _dir;
                $.post("{:url('gettemplist')}",{d:_dir},function (res){
                    if(res.code == '1'){
                        $(`.latename`).html(`<option value="">默认模板</option>`);
                        filelist[id] = res.data;
                        $.each(res.data,function (index,item){
                            $(`.latename`).append(`<option value="${item}">${item}</option>`);
                        });
                        layform.render('select');
                    }
                });
            },
            readtemp = function (data){
                let res = {};
                res.t = data.title ? data.title : `-`;
                res.u = data.uri ? data.uri : `-`;
                res.l = data.like ? data.like : ``;
                res.c = data.text ? data.text : `-`;
                res.t = `<li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">标题:</div><div class="cx-text-black-6"  style="max-width: 90%;">${res.t}</div></li>`;
                res.u = `<li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">图片:</div><div style="max-width: 90%;"><img src="${res.u}" class="cx-img-responsive"></div></li>`;
                res.l = `<li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">链接:</div><div class="cx-text-black-6"  style="max-width: 90%;">${res.l}</div></li>`;
                res.c = `<li class="cx-fex-l cx-fex-nowrap cx-pad-tb5"><div class="cx-text-black-3" style="min-width: 50px;">内容:</div><div class="cx-text-black-6"  style="max-width: 90%;">${res.c}</div></li>`;
                return res;
            };
        layform.on('select(onetemplate)', function(data){
            if(data.value.length == 0){
                $(`.onetemplateimg`).attr('src','__PUBLIC__/img/imgnone.jpg');
                $(`.onetemplateval`).val('');
                return false;
            }
            let d = layform.val("articlelist"),
                _dir = 'advertising/pic';
            _dir = d.TagMid == '2' ? 'advertising/piclist' : _dir;
            _dir = d.TagMid == '3' ? 'advertising/pictext' : _dir;
            _dir = d.TagMid == '4' ? 'advertising/text' : _dir;
            wormui.postUrl("{:url('getcode')}",{n:_dir,f:data.value},function (res){
                if(res.code == '1'){
                    $(`.onetemplateimg`).attr('src',res.data.img);
                    $(`.onetemplateval`).val(res.data.code);
                }
            });
        });
        layform.on('select(onemodel)', function(data){
            $(`._fidlist`).html(` <option value="">请选择广告</option>`);
            $(`._adlist`).html(``);
            $(`.onetemplateval`).val(``);
            if(contlist[data.value]){
                $.each(contlist[data.value],function (index,item){
                    $(`._fidlist`).append(`<option value="${item.id}">${item.title}</option>`);
                });
                layform.render('select');
                return false;
            }
            contlist[data.value] = {};
            wormui.postUrl("{:url('Advertising/getlist')}",{class:data.value,limit:'1000'},function (res){
                if(res.code == '1'){
                    $.each(res.data.data,function (index,item){
                        $(`._fidlist`).append(`<option value="${item.id}">${item.title}</option>`);
                        contlist[data.value][item.id] = item;
                    });
                    layform.render('select');
                }
            });
            getfile(data.value);
        });
        layform.on('select(fidlist)', function(data){
            wormui.postUrl("{:url('advertising/read')}",{id:data.value},function (res){
                if(res.code == '1'){
                    $(`._adlist`).html(``);
                    if(res.data.class == '2'){
                        $.each(res.data.cont,function (index,item){
                            let _res = readtemp(item);
                            $(`._adlist`).append(_res.t).append(_res.l).append(_res.u).append(`<hr>`);
                        });
                    }else{
                        let _res = readtemp(res.data.cont);
                        $(`._adlist`).append(_res.t).append(_res.l);
                        if(res.data.class == '1' || res.data.class == '3'){
                            $(`._adlist`).append(_res.u);
                        }
                        if(res.data.class == '3' || res.data.class == '4'){
                            $(`._adlist`).append(_res.c);
                        }
                    }
                }
            });
        });
    });
</script>
{/block}